<template>
  <ul class="fa-actors">
    <li
      v-for="(item, index) in actors"
      :key="item.id"
      class="fa-actors__item"
      :class="[
        `actor-${getActorColor(item.index)}`,
        {
          'is-active': isSelected(item)
        }
      ]"
      @click="toggleSelect(item, index)"
    >
      <div class="fa-actors__text">
        <slot name="item" v-bind="item">
          <span v-if="item.isSender" class="fa-actors__flag"></span>
          <span class="fa-actors__name" :title="item.name">{{ item.name }}</span>
        </slot>
      </div>

      <div class="fa-actors__counter">
        <div v-if="item.fill" class="fa-actors__counter-item">
          填写控件：{{ widgetCounter(item, WidgetStyle.FILL) }}
        </div>
        <div v-if="item.sign" class="fa-actors__counter-item">
          签署控件：{{ widgetCounter(item, WidgetStyle.SIGN) }}
        </div>
      </div>

      <div class="fa-actors__check">
        <i class="fa-actors__check-icon el-icon-check"></i>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref, watch } from 'vue'
import { Widget } from '@/models'
import { WidgetStyle, ActorData } from '@/types'

/** 参与方列表 */
export default defineComponent({
  name: 'FaActors',

  props: {
    /** 参与方列表 */
    actors: {
      type: Array as PropType<ActorData[]>,
      default: () => []
    },

    /** 是否多选 */
    multi: {
      type: Boolean,
      default: false
    },

    /** 选中数据, .sync 双向同步 */
    selected: {
      type: [Object, Array] as PropType<ActorData | ActorData[]>
    },

    /** 默认选中第一个 */
    defaultSelectFirst: {
      type: Boolean,
      default: true
    },

    /** 控件列表，用于控件计数 */
    widgets: {
      type: Array as PropType<Widget[]>,
      default: () => []
    }
  },

  setup(props, { emit }) {
    /** 单选激活 */
    const activeIndex = ref(props.defaultSelectFirst ? 0 : -1)

    /** 激活的参与方 */
    const activeActor = computed({
      get: () => props.actors[activeIndex.value],
      set: val => (activeIndex.value = props.actors.indexOf(val))
    })

    watch(
      activeActor,
      val => {
        !props.multi && emit('update:selected', val)
      },
      {
        immediate: true
      }
    )

    watch(
      () => props.selected,
      val => {
        !props.multi && (activeActor.value = val as ActorData)
      }
    )

    return {
      WidgetStyle,

      /** 激活的参与方 */
      activeIndex,

      getActorColor: Widget.getActorColor,

      /** 是否选中 */
      isSelected(actor: ActorData) {
        if (props.multi) {
          return props.selected?.includes(actor)
        } else {
          return props.selected === actor
        }
      },

      /** 切换选中 */
      toggleSelect(actor: ActorData, index: number) {
        if (props.multi) {
          let { selected } = props

          // 初始多选数据
          if (!Array.isArray(selected)) {
            selected = []
            emit('update:selected', selected)
          }

          const selectedIndex = selected?.indexOf(actor) ?? -1

          if (selectedIndex > -1) {
            selected?.splice(selectedIndex, 1)
          } else {
            selected?.push(actor)
          }
        } else {
          activeIndex.value = activeIndex.value === index ? -1 : index
        }
      },

      /** 控件计数 */
      widgetCounter(actor: ActorData, style: WidgetStyle) {
        return props.widgets.filter(w => w.option.style === style && w.actor.id === actor.id).length
      }
    }
  }
})
</script>

<style lang="scss">
.fa-actors {
  margin: 0;
  padding: 4px 0;
  overflow: auto;
  list-style: none;

  &__item {
    $h: 40px;
    position: relative;
    box-sizing: border-box;
    height: 50px;
    margin: 8px 12px;
    padding: 6px 12px 8px 15px;
    overflow: hidden;
    font-size: 12px;
    background: $background-color-secondary;
    border: 0.5px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    // 参与方颜色角标
    &::before {
      position: absolute;
      top: 8px;
      left: 8px;
      width: 2px;
      height: 12px;
      content: '';
    }
  }

  &__text {
    line-height: 1.5;
    @include text-ellipsis;
  }

  &__counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    color: $color-text-placeholder;
    line-height: 1;

    &-item {
      flex: 1;
    }
  }

  &__check {
    $s: 8px;
    position: absolute;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: $s * 2;
    height: $s * 2;
    color: #fff;
    border: $s solid $border-color;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    transition: all 0.2s ease-in-out;

    &-icon {
      position: absolute;
      top: -3px;
      left: -3px;
      font-weight: 100;
      font-size: 12px;
    }
  }

  &__flag {
    $s: 12px;
    display: inline-block;
    width: $s;
    height: $s;
    margin-right: 3px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    border-radius: 2px;

    &::before {
      display: inline-block;
      letter-spacing: 0;
      transform: scale(0.67);
      content: '发';
    }
  }
}

// 参与方颜色角标
@each $c, $color in $actor-colors {
  .fa-actors__item.actor-#{$c} {
    &::before {
      background-color: $color;
    }

    &:hover,
    &.is-active {
      background-color: rgba($color, 0.05);
      border-color: rgba($color, 0.15);

      .fa-actors {
        &__text {
          color: rgba(0, 0, 0, 0.85);
        }

        &__counter {
          color: rgba($color-text-primary, 0.35);
        }
      }
    }

    &.is-active .fa-actors__check {
      border-color: $color;
    }

    .fa-actors__flag {
      background: $color;
    }
  }
}
</style>
